<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>标签管理　</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script th:inline="javascript">
        $(document).ready(function () {
            $('form').submit(function (event) {
                event.preventDefault();
                var query = $('#query').val();
                $.get('/tags/search/' + query, function (data) {
                    var tableBody = "";
                    tableBody += "<table><tr> <th>Type</th> <th>Name</th> <th>Delete</th>  <th>Add</th></tr>";
                    for (var i = 0; i < data.length; i++) {
                        tableBody += "<tr>";
                        tableBody += "<td>" + data[i].tagType + "</td>";
                        tableBody += "<td>" + data[i].tagName + "</td>";
                        tableBody += "<td><a href=\"/tags/delete/";
                        tableBody += data[i].distinctId + "\">";
                        tableBody += "Delete<\/a></td>";
                        tableBody += "<td><a href=\"/tags/add/";
                        tableBody += data[i].distinctId + "\">";
                        tableBody += "Add<\/a></td>";
                        tableBody += "</tr>";
                    }
                    tableBody += "</table>";
                    $('#search-results').html(tableBody);
                });
            });
        });
    </script>
</head>
<body>
<h1>搜索</h1>
<form th:action="@{tags/search}" method="get">
    <input type="text" name="query" id="query" placeholder="输入搜索关键词">
    <button type="submit">搜索</button>
</form>
<div th:if="${tags != null and #lists.size(tags) > 0}">
    <div id="search-results">
        <table>
            <tr>
                <th>Type</th>
                <th>Name</th>
                <th>Delete</th>
                <th>Add</th>
            </tr>
            <tr th:each="tag : ${tags}">
                <td th:text="${tag.tagType}"></td>
                <td th:text="${tag.tagName}"></td>
                <td><a th:href="@{/tags/delete/{id}(id=${tag.tagName})}">Delete</a></td>
                <td><a th:href="@{/tags/add}">Add Tag</a></td>
            </tr>
        </table>
    </div>
</div>
<div th:unless="${tags==null or #lists.size(tags) > 0}">
    <!-- 如果列表长度等于0，显示一条连接 -->

    <h2>添加Tag</h2>
    <a th:href="@{/tags/add}">Add Tag</a>
</div>
</body>
</html>
